<template lang="">
    <div>
        <!-- 大容器 -->
        <section class="container">
            <!-- 左容器 -->
            <section class="itemLeft">
                <Ip>
                    <template #main>
                        <ItemOne />
                    </template>
                </Ip>
                <Ip>
                    <template #main>
                        <ItemTwo />
                    </template>
                </Ip>
            </section>
            <!-- 右容器 -->
            <section class="itemRight">
                <Ip>
                    <template #main>
                        <ItemThree />
                    </template>
                </Ip>
                <Ip>
                    <template #main>
                        <ItemFour />
                    </template>
                </Ip>
            </section>
        </section>
    </div>
</template>
<script setup>
    import Ip from '../../components/ItemPage.vue'
    import ItemOne from '../../components/ItemOne.vue'
    import ItemTwo from '../../components/ItemTwo.vue'
    import ItemThree from '../../components/ItemThree.vue'
    import ItemFour from '../../components/ItemFour.vue'
</script>
<style lang="scss" scoped>
    .container {
        width: 100%;
        margin: 0 auto;
        background-color: gray;
        display: flex;
        min-width: 14.84rem;
        
        .itemLeft,
        .itemRight{
            flex: 1;
        }
    }
    
</style>